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Editing the website using Dreamweaver CS5 

You will need Dreamweaver CS or newer version to edit the website properly. 



To edit the website and enter your information please follow the following procedure. 



1. Extract the zip to a specific folder. 

2. In the website folder, right click on " Index " html file 

3. Go to "Open With" Option. 

4. Click on Adobe Dreamweaver ( see figure) 
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Open with 
§ Add to archive... 
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Q Adobe Dreamweaver CSS 
d Firefox 

Google Chrome 
0 Internet Explorer 
0 Opera Internet Browser 
Q[] Word (desktop) 

Choose default program... 



5. 



Dreamweaver will load the index file. 
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6. Within Dreamweaver's interface click on the Code as shown in the figure. 



File Edit View Insert Modify Format Commands Site Window Help 



index.html x 



bootstrap, min. ess animate, ess font-awesome, rnin. ess templatemo_misc.css templatemo_style,css jquery-1.10.2.min.js jquer^ 



[[ Code 


Split | Design 


Live Code [=^f 


Live View Inspect [Jj^ 


Titie: EDUCATIONAL QUOTES J 




Sho w Code view (Press Ctrl key for all open document:) I 







r stylesheet 1 type= T text/ess T > 



<I— CSS Boots trap & Cuat cm --> 

<link rel=™s tyle3heet " href="c33 /bootstrap .inin. caa 1, > 
<link rel=™3 tyle3hee t" href=™ ess /animate . csa'"> 
<l±nk rel=™3 tyle3heet " href= T1 caa/ font- awe seme , min. caa T1 > 
<link rel=™3 tyle3hee t™ href=™caa/ templatemc_misc . ess ™> 



< ! -- Main 
<link rel= 



:ss --> 

"stylesheet " 



href ="033/ templat emo_atyle , 033 "> 



<!-- Favicons --> 

<link rel = IT, 3hcrtcut icon" 



href=™ images/ ice/ r avicon. ico T1 > 



</head> 
<body> 



<div claas= r, si te-header "> 

<div claa3 = ™main-navigation T1 > 

<div c la a a = 71 re a p on a i v e _me nu " > 
<ul> 

<liXa cl a a a = ™ ahow- 1 templat emc_hcme ™ href= r, #™>Gallery</a></li> 

<liXa class="shcw-2 templat emc_page2™ href =" #">Prodncts</aX/li> 

<liXa clas3 = n, shcw-3 templatemc_page3 ™ h re f = 71 fr 71 > S e r v i ce 3 < / a >< / 1 i > 

<li><a cla33="3hcw-4 templatemc_page4 " hre f= " # " >Abcut Ua</a></li> 

<li><a cl a 3 3 = "show- 5 templat emc_page 5 " href =™# 7, >Contact Us</a></li> 
</ul> 



<bodv> 



( O html] 


Format 


|None 


H 


fc CSS 


ID 


None 





Class None 
Link 



B I 



iE ;E y y Titie 



Page Properties. 



List Item.. 



7. Press Ctrl + F or go to "Edit" menu and click on Find and "Replace" command 
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I " File 



View Insert Modify Format Commands Site Window Help 



A* 



index.html 






Undo Edit Source 


Ctrl+Z 




BB35BB 






Redo 


Ctrl+Y 


( Code | 


Sp 




Cut 


Ctrl+X 


II ❖ ❖ < 






Copy 
Paste 

Paste Special... 


Ctrl+C 
Ctrl+V 
Ctrl* Shift* V 




24 
25 






* 


26 






Clear 




o 


27 
28 






Select All 


Ctrl + A 


-M- 


29 
30 
31 






Select Parent Tag 


CtrM 








Select Child 


Ctrl+] 


<* 


32 
33 






Find and Replace... 


Ctrl+ F 


0 


34 






Find Selection 


Shift+ F3 


i— i 


35 
36 


< 




Find Next 


F3 


<> 


37 






Go to Line 


Ctrl+G 


i V 


33 
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Show Code Hints 
Refresh Code Hints 


Ctrl+ Space 
Ctrl-K 
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42 
43 






Code Hint Tools 


► 


S3 






Indent Code 


Ctrl+Shift+> 




44 






Outdent Code 


Ctrl+Shift+< 




45 
46 
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Balance Braces 
Repeating Entries 
Code Collapse 


Ctrl+' 

► 




50 






Edit with External Editor 






51 
















Tag Libraries... 






4 






<bodv> 




Keyboard Shortcuts... 




PROPERTIES |_ 


Preferences... 


Ctrl+U 



OhTTML 



, CSS 



Format |None 
ID 



Class None 



lin.css ternplaterno_rinisc.css ternplatemo_style.css jquery-1. lO.Z.rnin.js jq 




Titie: EDUCATIONAL QUOTES 









bootstrap . min. , G3 3 "> 
animate . caa "> 
font- awesome. mi n.css™> 
templatemo_iniac . cs3 "> 



templatemc_3 tyle . C33 "> 



mage3/ico/favicon.ico™> 



■w-1 teffiplateiic_hcffie " h r e f = ™ # " >G a 1 1 e r y < / a >< / 1 i > 
w— 2 t emplatemc_page2 " href ="# ">Frc duct s</a></li> 
i-w-3 templa temc_page3 " h re f = 71 ft 11 > 5 e rv ices < / a >< / 1 i > 
w-4 templateinc_page4 T1 href About Ua</aX/li> 

•w-5 templatemc_page5 " h r e f = ™ ft 71 >C on t a c t Ua</aX/li> 



B I 



i= ±= ±= Titie 



None 



Link 



Target 



Page Properties. .. | 



In the Find dialog box, type what to want to search in the code in the find. For example if you 
want to have your real name in the place of "Type Name Here" then type "Type Name Here" in 
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find box and click on the "Find Next" button. 



V/ Pi' e Edit View Insert Modify Format Commands 


Site Window 


Help O ▼ A ▼ 




ndex.html x | 








jVI^-H'?' 1 ^ bootstrap.min.css animate, ess font-awesome, min.es 


s templatemo_mis 


cess templatemo_style.css jquery-1. 10.2.min.js 


jquery 


| Code | Split | Design Live Code p£ Live View Inspect 




Title: EDUCATIONAL QUOTES 




<? <£> C* fif Address: file://.P;,,PIT/website,/index.html ^ 1 dL 



<link rel="3tylesheet" href="c33/boot3trap.min. css"> 

<link rel="3tyle3heet" href ="c3s/animate . css"> 

<Hnlr rp1="irvl pihppr," hrpf = V.aa/fnnr.-aKP.imnp,iiin, rnn 



J Find and Replace 



JS3 



Find in: | Open Documents 



[ FindNext"^ 



Search: Source Code 
Find: 



Type Your Name Here| 



Options: Match case 

0 Match whole word 



| Ignore whitespace 
O Use regular expression 



1 Replace All 



Close 



<lixa cla33 = "3hcw-2 templatemo_page2 " href ="#">Product3</ax/li> 

■clixa clas3 = "show-3 templatemc_page3 " href = "#">Services</aX/li> 

<li><a clas3 = "3how-4 templatemo_page4 " href ="#">About Us</ax/li> 

<li><a clas3 = "3how-5 templatemo_page5 " href ="#">Contact Us</aX/li> 
</ul> 
</div> 



9. After clicking on the "Find Next" button the Dreamweaver will locate the text in the code. Close 
the Find and Replace dialog box. 



_ " File Edit View Insert Modify Format Commands Site Window Help H T © T £h T 



index.html x 



Source Code 



bootstrap.min.css animate, ess font-awesome, min. ess templatemo_misc.css templatemo_style.css jquery - 



Code 



Split | Design Live Code p^f Live View Inspect 

|| <]□ c^> (3 Tjj Add'ess: I file :///D|/D]T/website/indeK. html 



Title: EDUCATIONAL QUOTES 



* 



<> 



|</div> <!-- /.services --> 

<div claaa = T, conten.t about" id="menu-4 "> 
<div cl as s=" container n > 
<div class="row"> 

<div cla3 3=" ,1 col-ind-9 col-3Ki-lQ T1 > 

<div cla33 = "abcut-u3-ocnten.t "> 

<div clas3 = " toggle-content™ i d= " t ab 4 " > 

<h2 cla3a= ,! page- title ">About me</h2> 

< table widt;li="4 4D" border="D™> 
<tr> 

<td width= T1 lQ5 T1 ><3ti:cng>Name : </s trongx/ td> 
<td width= T1 2 3 6 T1 > EBB E < /td> 

<td width= T1 35 T, > </t:d> 

</tr> 
<tr> 

<tdxa trcng>F/Naine : < /s trongx /td> 

<td>Type Your Father Name tie re </td> 

<td>£nbsp; </td> 
</tr> 
<tr> 



Online-dit.blogspot.com 



M:llmar Mansoor 



10. Using your keyboard type your real name, make sure to not edit Html tag such <td>,</td> or 
any other tag around the text. 



L/Yl File Edit View Insert Modify Format Commands Site Window Help H T © ▼ ▼ 



index.html* x 



Code 



bootstrap, rnin. ess animate, ess font-awesorne.rnin.css ternplaternojnisc.css ternplaterno_style.css jquer 

Q Tltie: EDUCATIONAL QUOTES 



Split | Design Live Code p^jf Uve View Inspect (jj^ r 



<J=" <^> C ^ Add-ess: I file : ///D |/DlT/website/index , html 



</div> < ! ■ 



/ .services — > 



<div 013.33 = ™ content about" id= T1 menu-4 "> 
<div cla33 = n container lp > 
<div claas="row"> 

<div cl aa a = ™ col -Eid- 9 col - an- 1 0 71 > 
<div clasa= 71 about-ua- content" > 

<div 01333=™ toggle-content™ id="tab4™> 

<h2 claaa^page-title ™>About me</h2> 

< table width= T, 440™ border=" D"> 
<tr> 

ri l-r:=™105 "><3trcnj>Name : < / 3 trongX / td> 
<~1 -■■-il-:i="23€">Ali Alcbar< t1> 
<ta wiatn= ,r ^i ,r >*inosp;</ ta> 

</tr> 
<tr> 

<tdXatrcng>F/Naine : </strongX/td> 
<td>Type Your Father Name Here </td> 
<td>fcnbsp;</td> 

</tr> 
<tr> 

<tdxstrcng>I' . 0 . B : </s trcngx/td> 

<td>Type Your Date of Birth Here</td> 

<td>£nbsp; </td> 
</tr> 
<tr> 

<tdXatrong>Roll No:</atrongX/td> 
<td>Type Your Beard Roll No Here</td> 



11. Follow step 7 - step 10 from other text as well. 



12. Now save the file using Ctrl+S shortcut key or Save command from File menu. 



